<template>
  <div class="flex flex-col items-center justify-center p-8">
    <div class="relative">
      <div class="w-12 h-12 border-4 border-primary-200 rounded-full animate-spin"></div>
      <div class="absolute top-0 left-0 w-12 h-12 border-4 border-primary-600 rounded-full animate-spin border-t-transparent"></div>
    </div>
    <p v-if="text" class="mt-4 text-gray-600 text-sm">{{ text }}</p>
  </div>
</template>

<script setup lang="ts">
interface Props {
  text?: string
}

defineProps<Props>()
</script>